import { Link, useNavigate } from 'react-router-dom'
import Icon from '@/component/Icon'
import styles from './index.module.scss'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import { useEffect } from 'react'
import { UserInfoAction } from '@/store/reducers/profile'

const Profile = () => {
 const navigate =  useNavigate()
  // 获取redux的dispatch
  const dispatch = useAppDispatch()
  useEffect(() => {
    // 调用接口拿取用户信息
    dispatch(UserInfoAction())
  }, [dispatch])

  // 获取redux的useSelector
  const info = useAppSelector(state => state.profileer.info)

  return (
    <div className={styles.root}>
      <div className='profile'>
        {/* 个人信息 */}
        <div className='user-info'>
          <div className='avatar'>
            <img src={info.photo} alt='' />
          </div>
          <div className='user-name'>{info.name}</div>
          <Link to='/profile/edit'>
            个人信息 <Icon type='iconbtn_right' />
          </Link>
        </div>

        {/* 今日阅读 */}
        <div className='read-info'>
          <Icon type='iconbtn_readingtime' />
          今日阅读
          <span>30</span>
          分钟
        </div>

        {/* 动态 - 对应的这一行 */}
        <div className='count-list'>
          <div className='count-item'>
            <p>{info.art_count}</p>
            <p>动态</p>
          </div>
          <div className='count-item'>
            <p>{info.follow_count}</p>
            <p>关注</p>
          </div>
          <div className='count-item'>
            <p>{info.fans_count}</p>
            <p>粉丝</p>
          </div>
          <div className='count-item'>
            <p>{info.like_count}</p>
            <p>被赞</p>
          </div>
        </div>

        {/* 消息通知 - 对应的这一行 */}
        <div className='user-links'>
          <div className='link-item'>
            <Icon type='iconbtn_mymessages' />
            <div>消息通知</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_mycollect' />
            <div>收藏</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_history1' />
            <div>浏览历史</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_myworks' />
            <div>我的作品</div>
          </div>
        </div>
      </div>

      {/* 更多服务 */}
      <div className='more-service'>
        <h3>更多服务</h3>
        <div className='service-list'>
          <div className='service-item'>
            <Icon type='iconbtn_feedback' />
            <div>用户反馈</div>
          </div>
          <div className='service-item' onClick={()=>navigate('/chat')}>
            <Icon type='iconbtn_xiaozhitongxue' />
            <div>小智同学</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Profile
